<template>
  <div class="login-container">
    <div class="loading-container" v-if="showLoading">
      <div class="loading-hd">
        <!--<img :src="'/logo.png'" alt="">-->
      </div>
      <div class="loading-bd"></div>
      <div class="loading-ft">
        <img :src="'/qidong.png'" alt="">
      </div>
    </div>
    <!--<div class="login-header">-->
    <!--  <img :src="'/logo.png'" alt="">-->
    <!--</div>-->
    <!--<div class="login-form">-->
    <!--  <div class="input-row">-->
    <!--    <input type="text" v-model="form.msisdn" placeholder="手机号" @input="checkTel">-->
    <!--  </div>-->
    <!--  <div class="err-row">-->
    <!--    {{ errMsg.msisdn }}-->
    <!--  </div>-->
    <!--  <div class="input-row">-->
    <!--    <input type="text" v-model="form.password" placeholder="密码" @input="checkPassword">-->
    <!--  </div>-->
    <!--  <div class="err-row">-->
    <!--    {{ errMsg.password }}-->
    <!--  </div>-->
    <!--  <div class="login-btn" @click="handleLogin">登录</div>-->
    <!--</div>-->
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import * as dd from 'dingtalk-jsapi'
import { agentId, corpId } from '@/config/index.js'
import { bindApi, getDdUserInfoApi, getSignatureApi, getTicketApi, loginApi } from '@/api/user.js'
import { showToast } from 'vant'

const router = useRouter()
const showLoading = ref(true)

const form = reactive({
  msisdn: '',
  password: '',
  userid: ''
})
// const errMsg = reactive({
//   msisdn: '',
//   password: ''
// })

// const checkTel = () => {
//   if (!form.msisdn) {
//     errMsg.msisdn = '请输入手机号'
//     return false
//   } else if (form.msisdn.length !== 11) {
//     errMsg.msisdn = '请输入正确手机号'
//     return false
//   }
//   errMsg.msisdn = ''
//   return true
// }
// const checkPassword = () => {
//   if (!form.password) {
//     errMsg.password = '请输入密码'
//     return false
//   } else if (form.password.length < 6) {
//     errMsg.password = '密码位数不能小于6位'
//     return false
//   }
//   errMsg.password = ''
//   return true
// }

// const handleLogin = async () => {
//   if (checkTel() && checkPassword()) {
//     let res = await bindApi({ msisdn: form.msisdn,password: form.password, userId: form.userid }).catch((err)=>{
//       showToast(err.msg);
//     })
//     if(res){
//       let uRes = await loginApi({ dingUserId: form.userid }).catch(err=>showToast(err.msg))
//       if(uRes){
//         // 登录成功,说明已经绑定
//         localStorage.setItem('token', uRes.data)
//         router.replace('/workbench')
//       }
//     }
//     // localStorage.setItem('token', 123)
//     // router.replace('/home')
//   }
// }
const getDDUserInfo = () => {

  // 登录成功,说明已经绑定
  let token = localStorage.getItem('token')
  if(token){
    router.replace('/workbench')
    return
  }
  dd.getAuthCode({
    corpId,
    success: async (res) => {
      const { code } = res
      // showToast(`code${code}`)
      let userRes = await getDdUserInfoApi(code).catch(err=>{
        showToast({
          message:'操作失败',
          duration:3000
        })
      })
      if (userRes) {
        console.log(1,userRes)
        // 这里只能获取到钉钉的userID
        if(userRes.data.userid){
          form.userid = userRes.data.userid
          let uRes = await loginApi({ dingUserId: userRes.data.userid }).catch((err)=>{
            // alert(JSON.stringify(err))
            // 没有用户:说明没绑定
            // showLoading.value = false
            showToast({
              message:'用户不存在1',
              duration:3000
            })
          })
          console.log(2,uRes)

          if(uRes){
            showToast({
              message:'登录成功',
              duration:3000
            })
            // 登录成功,说明已经绑定
            localStorage.setItem('token', uRes.data)
            router.replace('/workbench')
          }else{
            let params = { msisdn: userRes.data.mobile, userId: userRes.data.userid }
            // 没有用户:说明没绑定,先把手机号
            let bindRes = await bindApi(params).catch((err)=> {
              showToast({
                message:err.msg || '绑定异常',
                duration:3000
              })
            })
            if(bindRes){
              // 绑定成功,就直接跳转
              let uRes2 = await loginApi({ dingUserId: userRes.data.userid }).catch(err=>showToast(err.msg))
              if(uRes2){
                showToast({
                  message:'登录成功',
                  duration:3000
                })
                // 登录成功,说明已经绑定
                localStorage.setItem('token', uRes2.data)
                router.replace('/workbench')
              }
            }else{
              // 绑定失败,提示用户不存在
              showToast({
                message:'用户不存在',
                duration:3000
              })
            }
          }
        }else{
          showToast('获取钉钉用户信息失败')
        }
      }else{
        alert(`code:${code},userRes:${JSON.stringify(userRes)}`)
        showToast('获取钉钉用户信息失败!')
      }
    },
    fail: () => {
      alert('获取失败')
    },
    complete: () => {
      alert('complate')
    }
  })
}

// const initDD = async () => {
//   // TODO 1.网络请求获取jsapi_ticket
//   alert(90011)
//
//   let res = await getTicketApi().catch(err=>{
//     console.log(7001,JSON.stringify(err))
//   })
//   alert(9002,JSON.stringify(res))
//   if (res && res.ticket) {
//     alert(9003)
//     let jsTicket = res.ticket
//     let timeStamp = new Date().getTime()
//     let nonceStr = generateNonceStr()
//     let p = {
//       url: window.location.href,
//       jsTicket,
//       nonceStr,
//       timeStamp
//     }
//     // TODO 2.网络请求获取签名
//     let sRes = await getSignatureApi(p)
//     alert(9004)
//     if (sRes) {
//       alert(9005)
//       // 4.配置钉钉JS-SDK
//       dd.config({
//         agentId, // 必填，微应用ID
//         corpId,//必填，企业ID
//         timeStamp, // 必填，生成签名的时间戳
//         nonceStr, // 必填，自定义固定字符串。
//         signature: sRes, // 必填，签名
//         debug: true,
//         type: 0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
//         jsApiList: [
//           'runtime.info',
//           'biz.contact.choose',
//           'device.notification.confirm',
//           'device.notification.alert',
//           'device.notification.prompt',
//           'biz.ding.post',
//           'biz.util.openLink'
//         ] // 必填，需要使用的jsapi列表，注意：不要带dd。
//       })
//
//       // 7.初始化后可调用钉钉提供的API
//       dd.ready(() => {
//         // 弹框弹窗
//         alert('钉钉JS-SDK初始化成功')
//         getDDUserInfo()
//       })
//
//       dd.error((err) => {
//         alert('钉钉JS-SDK初始化失败')
//         console.error('钉钉JS-SDK初始化失败', err)
//       })
//     }
//   }
// }

// const generateNonceStr = () => {
//   const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
//   let nonceStr = ''
//   for (let i = 0; i < 16; i++) {
//     nonceStr += chars.charAt(Math.floor(Math.random() * chars.length))
//   }
//   return nonceStr
// }
onMounted(() => {
  // initDD()
  getDDUserInfo()
})
</script>

<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;

  .loading-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0088f5;
    display: flex;
    flex-direction: column;
    align-items: center;

    .loading-hd {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      img {
        width: 50px;
        margin: 10px;
      }
    }

    .loading-bd {
      width: 100%;
      flex: 1;
    }

    .loading-ft {
      img {
        width: 100%;
      }
    }
  }

  .login-header {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .login-form {
    width: 80vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 100px;

    .input-row {
      height: 30px;
      border-radius: 5px;
      border: 1px solid #f2f2f2;
      width: 60vw;
      padding: 0 5px;

      > input {
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        line-height: 30px;
      }
    }

    .err-row {
      padding: 0 10px;
      color: red;
      width: 60vw;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
    }

    .login-btn {
      width: 60vw;
      height: 40px;
      background-color: rgba(199, 45, 39, 1);
      border-radius: 5px;
      margin-top: 30px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>
